<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 800px;
            height: 800px;
            background-color: pink;
            background-image: url('./resource/1.jpg');
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-repeat: repeat;
            background-repeat: no-repeat;
            /* background-size: 100%; */
            /* background-size: 50%; */
            /* background-size: 50%  100%; */

            background-position: 0px 0px;
            background-position: 10px 10px;
            background-position: 10px 100px;
        }


        #left{
            width: 41px;
            height: 69px;
            background-image: url('./resource/icon-slides.png');
            background-position: -82px 0px;
        }

        #left:hover{
            background-position: 0px 0px;
        }


        #box2{
            width: 800px;
            height: 800px;
            background: no-repeat url('./resource/1.jpg') orange 50% 50%/100%;
            background: no-repeat url('./resource/1.jpg') orange center center/100%;
        }

    </style>
</head>
<body>
    <!--  
        1. 详写
            background-color    背景颜色
            background-image    背景图片
                                 url(图片来源地址)
            background-repeat   背景重复
                                 no-repeat  不重复
                                 repeat-x   水平重复
                                 repeat-y   垂直重复
                                 repeat     水平+垂直重复

            background-size     背景大小
                                 x
                                 x y

            background-position 背景定位
                                 x y

        2. 简写
            background: [color] | [image] | [repeat] | [position[/size]]
    -->
    
    <div id="box"></div>

    <div id="left"></div>

    <div id="box2"></div>


</body>
</html>